<template>
	<div class="login_container">
		<div class="login_box">
			<div class="avatar_box">
				<!--头像区-->
				<img src= "../assets/supermarket.jpg" alt />
			</div>
			<!--登陆表单区域-->
			<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form" label-width="0px">
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
				</el-form-item>
				<el-form-item class="btns">
					<!--按钮-->
					<el-button @click="login" type="primary">登录</el-button>
					<el-button @click="resetLoginForm" type="info">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				loginForm: {
					username: "admin",
					password: "admin"
				},
				loginRules: {
					username: [{
							required: true,
							message: "请输入用户名",
							trigger: "blur"
						},
						{
							min: 5,
							max: 12,
							message: "长度在 5 到 12 个字符",
							trigger: "blur"
						}
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 5,
							max: 12,
							message: "密码为 5~12 位",
							trigger: "blur"
						}
					]
				}
			};
		},
		methods: {
			resetLoginForm() {
				this.$refs.loginFormRef.resetFields();
			},
			login() {
				this.$refs.loginFormRef.validate(async valid => {
					if (!valid) return;
					const {
						data: res
					} = await this.$http.post("system/apis/login", this.loginForm);
					//console.log(res)
					if (res.code == 30000) {
						this.$message.error("没有此用户");
						return;
					}
					if (res.code == 30001) {
						this.$message.error("密码错误");
						return;
					}
					if (res.code == 20000) {
						this.$message.success("登录成功");
						//console.log(res.data.user.StaffName)
						//console.log(res.data.user.StaffLevel)
						//console.log(res.data.user)
						window.sessionStorage.setItem('username', res.data.user.StaffName);
						window.sessionStorage.setItem('level', res.data.user.StaffLevel);
						window.sessionStorage.setItem('salary', res.data.user.StaffSalary);
						window.sessionStorage.setItem('remarks', res.data.user.StaffRemarks);
						window.sessionStorage.setItem('telephone', res.data.user.StaffTelephone);
						this.$router.push({path: "/home"});
						return;
					}
					this.$message.error("后台错误");
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.login_container{
		background: powderblue; //给登录组件加背景色
		height: 100%; //背景色高度
	}
	.login_box{  //给登录盒子创建样式
		width: 500px;
		height: 350px;
		background-color: #fff;
		border-radius: 3px;
		position: absolute;   //给登录盒子添加绝对位置
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);  //给登录盒子进行位移横轴上移动-50%纵轴一样
		.avatar_box{
			//因为这个头像盒子是在登录盒子里的所以在登录盒子里给头像盒子加样式
			height: 130px;
			width: 130px;
			border: 1px solid #eee;//给头像盒子外边加一个边框线
			border-radius: 20%;
			padding: 5px;
			box-shadow: 0 0 10px #ddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: #fff;
			img{    //给图片设置宽高
				width: 100%;
				height: 100%;
				border-radius: 20%;

			}
		}
	}

	//按钮类名选择器
	.btns{
		display: flex;
		justify-content: flex-end;
		//justify-content属性定义了项目在主轴上的对齐方式
		//flex-end是居右对齐
	}
	.login_form{
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 0 20px;  //距离上下左右的边距 上下0 左右20像素 但是右边会超出form表单
		box-sizing: border-box;
	}

</style>

